/* router V6 基础使用 */

/* 一级路由 */

/* react-router-dom 实现 */
// 样式私有化处理  styled-components+style
import React from "react";
import {NavBarBox, NavBox} from "./NavStyle"
import {HashRouter, Routes, Route, NavLink, Navigate} from "react-router-dom";

import A from "./A-v6.jsx"
import B from "./B-v6.jsx"
import C from "./C-v6.jsx"
import A1 from "./a/A1"
import A2 from "./a/A2"
import A3 from "./a/A3"

const Nav = function () {
    return <HashRouter>
        <NavBox>
            <h2 className="title">购物商城</h2>
            <NavBarBox hover={'red'}>
                <NavLink to="/a">首页</NavLink>
                <NavLink to="/b">秒杀</NavLink>
                <NavLink to="/c">我的</NavLink>
            </NavBarBox>
        </NavBox>
        {/*
          所有的路由匹配规则，放在<Routes>中;
          每一条规则的匹配，还是基于<Route>;
            + 路由匹配成功，不再基于component/render控制渲染的组件，而是基于element，语法格式是 <Component/>
            + 不再需要Switch，默认就是一个匹配成功，就不在匹配下面的了
            + 不再需要exact，默认每一项匹配都是精准匹配
          原有 <Redire > 操作，被 <Navigate to="/" /> 代替
        */}
        <Routes>
            <Route path="/" element={<Navigate to="/a"/>}/>
            <Route path="/a" element={<A/>}>
                {/*v6版本，要求所有不分散到各个组件中*/}
                <Route path="/a" element={<Navigate to="/a/a1"/>}/>
                <Route path="/a/a1" element={<A1/>} />
                <Route path="/a/a2" element={<A2/>} />
                <Route path="/a/a3" element={<A3/>} />
            </Route>
            <Route path="/b" element={<B/>}/>
            <Route path="/c/:id?/:name?" element={<C/>}/>
            {/*如果以上都不匹配，我们可以渲染404组件，也可以重定向到A组件传递不同的问号参数信息.*/}
            <Route path="*" element={<Navigate to={{
                pathname: '/a',
                search: '?from=404'
            }}/>}/>
        </Routes>
    </HashRouter>
}

export default Nav